<template>
<div class="content">
    <div class="left_cell">
        <div class="left_inp">
            <el-select v-model="curProject" placeholder="选择项目" size="small" @change="proChange">
                <el-option v-for="item in proList" :key="item.proId" :label="item.proName" :value="item.proId">
                </el-option>
            </el-select>
            <el-input placeholder="请输入车牌号" v-model="xmVal" size="small" @keyup.enter.native="handlerDeptList">
                <el-button slot="append" icon="el-icon-search" @click.native="handlerDeptList">
                </el-button>
            </el-input>
        </div>
        <div class="slect_cp">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"><i class="el-icon-wjj"></i>全选</el-checkbox>
            <el-checkbox-group v-model="checkBusNumber" @change="handleCheckedCitiesChange" class="zj">
                <el-checkbox v-for="item,index in busNumberList" :label="item" :key="index"><i class="el-icon-bus"></i>{{item}}</el-checkbox>
            </el-checkbox-group>
        </div>
    </div>
    <div class="right_cell" v-show="right">
        <div v-show="showJM=='1'">
            <div class="right_title">
                <span></span>
                <span>已选车辆 (1)</span>
                <el-button type="primary" size="mini" @click="bcSJ" class="bc">保存</el-button>
                <el-button size="mini" @click="show_right()">取消</el-button>
            </div>
            <el-divider></el-divider>
            <div class="yxcl_box">
                <div class="yxcl_nr">
                    <span>项目：</span>
                    <span>{{ labelProject || "暂无数据" }}</span>
                    <span>车牌号：</span>
                    <span>{{ labelBusNumber || "暂无数据"  }}</span>
                    <span>主机名称：</span>
                    <span>{{ labelHostName || "暂无数据"  }}</span>
                    <span>主机ID：</span>
                    <span>{{ labelDeviceId || "暂无数据"  }}</span>
                </div>
            </div>
            <div class="right_title">
                <span></span>
                <span>参数配置</span>
            </div>
            <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item title="视频参数" name="1">
                    <div class="spcs_box">
                        <el-button type="primary" size="small" class="sp_sz" @click="setVideoSettting()" icon="el-icon-setting">设置</el-button>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="主机信息" name="2">
                    <div class="zhuji_name">
                        <span>主机名称：<el-checkbox v-model="isAllowed"></el-checkbox></span>
                        <el-input v-model="editHostName" size="small" :disabled="!isAllowed || tb_cph"></el-input>
                        <el-checkbox v-model="tb_cph" @change="tbcph">同步车牌号</el-checkbox>
                    </div>
                    <!-- <div class="zhuji_id">
                            <span>主机ID：</span>
                            <el-input v-model="zjidVal" size="small"></el-input>
                        </div> -->
                </el-collapse-item>
                <el-collapse-item title="GPS上传参数" name="3">
                    <div class="zhuji_id">
                        <span>GPS上传间隔：</span>
                        <el-radio-group v-model="deviceSettings.gpsSetting.gpsInterval">
                            <el-radio :label="10">10s</el-radio>
                            <el-radio :label="20">20s</el-radio>
                            <el-radio :label="30">30s</el-radio>
                            <el-radio :label="gps_inp">
                                <el-input size="mini" class="gps_inp" v-model="gps_inp" placeholder="请输入"></el-input> s
                            </el-radio>
                        </el-radio-group>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="测温报警参数" name="4">
                    <div class="cwbj">
                        <span>是否报警</span>
                        <el-switch v-model="deviceSettings.tmpSetting.isAlarmed" active-value="1" inactive-value="0"></el-switch>
                        <span>温度报警阈值</span>
                        <el-input v-model="deviceSettings.tmpSetting.tmpAlarmThreshold" size="mini"></el-input>
                        <span>℃</span>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
        <div v-show="showJM=='2'">
            <div class="right_title">
                <span></span>
                <span>已选车辆 ({{checkBusNumber.length}})</span>
                <el-button type="primary" size="mini" @click="bcSJ" class="bc">保存</el-button>
                <el-button size="mini">取消</el-button>
            </div>
            <el-divider></el-divider>
            <div class="yxcl_box">
                <div class="yxcl_nr">
                    <span>项目：</span>
                    <span>{{ labelProject }}</span>
                </div>
            </div>
            <div class="right_title">
                <span></span>
                <span>参数配置</span>
            </div>
            <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item title="视频参数" name="1">
                    <div class="spcs_box">
                        <el-button type="primary" size="small" class="sp_sz" @click="setVideoSettting()" icon="el-icon-setting">设置</el-button>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="主机信息" name="2">
                    <div class="zhuji_name">
                        <span>主机名称：<el-checkbox v-model="isAllowed"></el-checkbox></span>
                        <el-input v-model="editHostName" size="small" :disabled="!isAllowed"></el-input>
                        <!-- <el-checkbox v-model="tb_cph" disabled>同步车牌号</el-checkbox> -->
                    </div>
                    <!-- <div class="zhuji_id">
                            <span>主机ID：</span>
                            <el-input v-model="zjidVal" size="small"></el-input>
                        </div> -->
                </el-collapse-item>
                <el-collapse-item title="GPS上传参数" name="3">
                    <div class="zhuji_id">
                        <span>GPS上传间隔：</span>
                        <el-radio-group v-model="multipleDeviceSetting.gpsSetting.gpsInterval">
                            <el-radio :label="10">10s</el-radio>
                            <el-radio :label="20">20s</el-radio>
                            <el-radio :label="30">30s</el-radio>
                            <el-radio :label="gps_inp">
                                <el-input size="mini" class="gps_inp" v-model="gps_inp" placeholder="请输入"></el-input> s
                            </el-radio>
                        </el-radio-group>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="测温报警参数" name="4">
                    <div class="cwbj">
                        <span>是否报警</span>
                        <el-switch v-model="multipleDeviceSetting.tmpSetting.isAlarmed" active-value="1" inactive-value="0"></el-switch>
                        <span>温度报警阈值</span>
                        <el-input v-model="multipleDeviceSetting.tmpSetting.tmpAlarmThreshold" size="mini"></el-input>
                        <span>℃</span>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
        <transition name="el-fade-in-linear">
            <div class="spsz" v-show="isopen_pl">
                <div>
                    <span>设置</span>
                    <span @click="hide_pl()"></span>
                </div>

                <div class="spnr">
                    <div class="spszneicheng">
                        <div class="left_sp">
                            <div>
                                <h3>视频占位</h3>
                            </div>
                        </div>
                        <div class="right_sz">
                            <div class="sxt_xz">
                                <div class="chlnotSelect" v-for="(channel,index) in chlList" :key="index" @click="changeChlIndex($event,channel.chlId)">
                                    {{channel.camName != null && typeof channel.camName != 'undefined' ?channel.camName  : '通道暂未命名'}}
                                </div>
                            </div>
                            <div class="xzgd">
                                <span></span>
                                <span>OSD属性</span>
                            </div>
                            <ul class="osd_sx">
                                <li>
                                    <span>OSD属性</span>
                                    <el-select v-model="tmpVideoSetting.chlOsdAttrib" placeholder="OSD属性" size="small">
                                        <el-option v-for="item in osdAtr" :key="item.lable" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </li>
                                <li>
                                    <span>
                                        <el-checkbox v-model="tmpVideoSetting.chlIsShowOsd"></el-checkbox> 显示名称
                                    </span>
                                    <el-input size="small" placeholder="" v-model="tmpVideoSetting.chlName" :disabled="useChlName"></el-input>
                                    <el-checkbox v-model="useChlName" class="tdmc_checkbox" @change="chlNameUsed">通道名称</el-checkbox>
                                </li>
                                <li class="mcxs_zbz">
                                    <span>名称显示坐标轴</span>
                                    <el-input size="small" placeholder="X坐标" v-model="tmpVideoSetting.chlNameXPos"></el-input>
                                    <el-input size="small" placeholder="Y坐标" v-model="tmpVideoSetting.chlNameYPos"></el-input>
                                </li>
                                <li>

                                    <span>
                                        <el-checkbox v-model="tmpVideoSetting.chlIsShowDate"></el-checkbox> 显示日期
                                    </span>
                                    <!-- <el-date-picker v-model="chosDate" type="date" placeholder="选择日期"></el-date-picker> -->
                                    <el-select v-model="tmpVideoSetting.chlOsdType" placeholder="请选择时间" size="small">
                                        <el-option v-for="item in xs_date" :key="item.lable" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </li>
                                <li>
                                    <span>
                                        <el-checkbox v-model="tmpVideoSetting.chlIsShowTime"></el-checkbox> 显示时间
                                    </span>
                                    <el-select v-model="tmpVideoSetting.hourOsdType" placeholder="请选择时间" size="small">
                                        <el-option v-for="item in xs_time" :key="item.lable" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </li>
                                <li>
                                    <span>
                                        <el-checkbox v-model="tmpVideoSetting.chlIsShowWeek"></el-checkbox> 显示星期
                                    </span>
                                </li>
                                <li class="mcxs_zbz">
                                    <span>日期显示坐标</span>
                                    <el-input size="small" placeholder="X坐标" v-model="tmpVideoSetting.chlTimeXPos"></el-input>
                                    <el-input size="small" placeholder="Y坐标" v-model="tmpVideoSetting.chlTimeYPos"></el-input>
                                </li>
                            </ul>
                            <div class="xzgd">
                                <span></span>
                                <span>字符增加</span>
                            </div>
                            <ul class="zf_dj">
                                <li v-for="content,index in tmpVideoSetting.charContent" :key="index">
                                    <span>
                                        <el-checkbox v-model="tmpVideoSetting.charContent[index].nShowOSD"></el-checkbox> 字符{{index+1}}
                                    </span>
                                    <el-input size="small" v-model="tmpVideoSetting.charContent[index].szOsdCode" :disabled="useGJM[index] || useCPH[index]"></el-input>
                                    <el-checkbox v-model="useGJM[index]" @change="gjmUsed(index)">国际码</el-checkbox>
                                    <el-checkbox v-model="useCPH[index]" @change="cphUsed(index)">车牌号</el-checkbox>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="x_an">
                    <el-button @click="cancelSetting()" size="small">取 消</el-button>
                    <el-button type="primary" @click="saveVideoSetting()" size="small">保 存</el-button>
                </div>
            </div>
        </transition>
        <div v-show="showJM=='3'">
            <div class="right_title">
                <span></span>
                <span>已选车辆 ({{checkBusNumber.length}})</span>
            </div>
            <el-divider></el-divider>
            <div class="right_content_zwsj">
                <div>
                <img src="../../static/img/ycpzZanwushuju.png" alt="">
                <span>
                    暂无数据
                </span>
                </div>
            </div>
        </div>
    </div>
    <div class="right_cell" v-show="rightjy">
        <div v-show="showJM=='1'">
            <div class="right_title">
                <span></span>
                <span>已选车辆 (1)</span>
                <el-button size="mini" type="primary" @click="show_right()">修改</el-button>
            </div>
            <el-divider></el-divider>
            <div class="yxcl_box">
                <div class="yxcl_nr">
                    <span>项目：</span>
                    <span>{{ labelProject || "暂无数据" }}</span>
                    <span>车牌号：</span>
                    <span>{{ labelBusNumber || "暂无数据"  }}</span>
                    <span>主机名称：</span>
                    <span>{{ labelHostName || "暂无数据"  }}</span>
                    <span>主机ID：</span>
                    <span>{{ labelDeviceId || "暂无数据"  }}</span>
                </div>
            </div>
            <div class="right_title">
                <span></span>
                <span>参数配置</span>
            </div>
            <el-collapse v-model="activeNames" @change="handleChange"  >
                <el-collapse-item title="视频参数" name="1">
                    <div class="spcs_box">
                        <el-button type="primary" size="small" class="sp_sz" @click="setVideoSettting()" icon="el-icon-setting">查看</el-button>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="主机信息" name="2">
                    <div class="zhuji_name">
                        <span>主机名称：<el-checkbox v-model="isAllowed" disabled></el-checkbox></span>
                        <el-input v-model="editHostName" size="small" :disabled="!isAllowed || tb_cph"></el-input>
                        <!-- <el-input v-model="editHostName" size="small" disabled></el-input> -->
                        <el-checkbox v-model="tb_cph" @change="tbcph" disabled>同步车牌号</el-checkbox>
                    </div>
                    <!-- <div class="zhuji_id">
                            <span>主机ID：</span>
                            <el-input v-model="zjidVal" size="small"></el-input>
                        </div> -->
                </el-collapse-item>
                <el-collapse-item title="GPS上传参数" name="3">
                    <div class="zhuji_id">
                        <span>GPS上传间隔：</span>
                        <el-radio-group v-model="deviceSettings.gpsSetting.gpsInterval" >
                            <el-radio :label="10" disabled>10s</el-radio>
                            <el-radio :label="20" disabled>20s</el-radio>
                            <el-radio :label="30" disabled>30s</el-radio>
                            <el-radio :label="gps_inp" disabled>
                                <el-input size="mini" class="gps_inp" v-model="gps_inp" placeholder="请输入"  disabled></el-input> s
                            </el-radio>
                        </el-radio-group>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="测温报警参数" name="4">
                    <div class="cwbj">
                        <span>是否报警</span>
                        <el-switch v-model="deviceSettings.tmpSetting.isAlarmed" active-value="1" inactive-value="0" disabled></el-switch>
                        <span>温度报警阈值</span>
                        <el-input v-model="deviceSettings.tmpSetting.tmpAlarmThreshold" size="mini" disabled ></el-input>
                        <span>℃</span>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
        <div v-show="showJM=='2'">
            <div class="right_title">
                <span></span>
                <span>已选车辆 ({{checkBusNumber.length}})</span>
                <el-button type="primary" size="mini" @click="bcSJ" class="bc">保存</el-button>
                <el-button size="mini">取消</el-button>
            </div>
            <el-divider></el-divider>
            <div class="yxcl_box">
                <div class="yxcl_nr">
                    <span>项目：</span>
                    <span>{{ labelProject }}</span>
                </div>
            </div>
            <div class="right_title">
                <span></span>
                <span>参数配置</span>
            </div>
            <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item title="视频参数" name="1">
                    <div class="spcs_box">
                        <el-button type="primary" size="small" class="sp_sz" @click="setVideoSettting()" icon="el-icon-setting">设置</el-button>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="主机信息" name="2">
                    <div class="zhuji_name">
                        <span>主机名称：<el-checkbox v-model="isAllowed"></el-checkbox></span>
                        <el-input v-model="editHostName" size="small" :disabled="!isAllowed"></el-input>
                        <!-- <el-checkbox v-model="tb_cph" disabled>同步车牌号</el-checkbox> -->
                    </div>
                    <!-- <div class="zhuji_id">
                            <span>主机ID：</span>
                            <el-input v-model="zjidVal" size="small"></el-input>
                        </div> -->
                </el-collapse-item>
                <el-collapse-item title="GPS上传参数" name="3">
                    <div class="zhuji_id">
                        <span>GPS上传间隔：</span>
                        <el-radio-group v-model="multipleDeviceSetting.gpsSetting.gpsInterval">
                            <el-radio :label="10">10s</el-radio>
                            <el-radio :label="20">20s</el-radio>
                            <el-radio :label="30">30s</el-radio>
                            <el-radio :label="gps_inp">
                                <el-input size="mini" class="gps_inp" v-model="gps_inp" placeholder="请输入"></el-input> s
                            </el-radio>
                        </el-radio-group>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="测温报警参数" name="4">
                    <div class="cwbj">
                        <span>是否报警</span>
                        <el-switch v-model="multipleDeviceSetting.tmpSetting.isAlarmed" active-value="1" inactive-value="0"></el-switch>
                        <span>温度报警阈值</span>
                        <el-input v-model="multipleDeviceSetting.tmpSetting.tmpAlarmThreshold" size="mini"></el-input>
                        <span>℃</span>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
        <transition name="el-fade-in-linear">
            <div class="spsz_jy" v-show="isopen_pl">
                <div>
                    <span>设置</span>
                    <span @click="hide_pl()"></span>
                </div>

                <div class="spnr_jy">
                    <div class="spszneicheng">
                        <div class="right_sz">
                            <div class="sxt_xz">
                                <div class="chlnotSelect" v-for="(channel,index) in chlList" :key="index" @click="changeChlIndex($event,channel.chlId)">
                                    {{channel.camName != null && typeof channel.camName != 'undefined' ?channel.camName  : '通道暂未命名'}}
                                </div>
                            </div>
                            <div class="xzgd">
                                <span></span>
                                <span>OSD属性</span>
                            </div>
                            <ul class="osd_sx">
                                <li>
                                    <span>OSD属性</span>
                                    <el-select v-model="tmpVideoSetting.chlOsdAttrib" placeholder="OSD属性" size="small" disabled>
                                        <el-option v-for="item in osdAtr" :key="item.lable" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </li>
                                <li>
                                    <span>
                                        <el-checkbox v-model="tmpVideoSetting.chlIsShowOsd" disabled></el-checkbox> 显示名称
                                    </span>
                                    <el-input size="small" placeholder="通道名称" v-model="tmpVideoSetting.chlName" disabled></el-input>
                                    <el-checkbox v-model="useChlName" class="tdmc_checkbox" disabled>通道名称</el-checkbox>
                                </li>
                                <li class="mcxs_zbz">
                                    <span>名称显示坐标轴</span>
                                    <el-input size="small" placeholder="X轴坐标" v-model="tmpVideoSetting.chlNameXPos" disabled></el-input>
                                    <el-input size="small" placeholder="Y轴坐标" v-model="tmpVideoSetting.chlNameYPos" disabled></el-input>
                                </li>
                                <li>
                                    <span>
                                        <el-checkbox v-model="tmpVideoSetting.chlIsShowDate" disabled></el-checkbox> 显示日期
                                    </span>
                                    <!-- <el-date-picker v-model="chosDate" type="date" placeholder="选择日期"></el-date-picker> -->
                                    <el-select v-model="tmpVideoSetting.chlOsdType" placeholder="日期格式" size="small" disabled>
                                        <el-option v-for="item in xs_date" :key="item.lable" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </li>
                                <li>
                                    <span>
                                        <el-checkbox v-model="tmpVideoSetting.chlIsShowTime" disabled></el-checkbox> 显示时间
                                    </span>
                                    <el-select v-model="tmpVideoSetting.hourOsdType" placeholder="时间制" size="small" disabled>
                                        <el-option v-for="item in xs_time" :key="item.lable" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </li>
                                <li>
                                    <span>
                                        <el-checkbox v-model="tmpVideoSetting.chlIsShowWeek" disabled></el-checkbox> 显示星期
                                    </span>
                                </li>
                                <li class="mcxs_zbz">
                                    <span>日期显示坐标</span>
                                    <el-input size="small" placeholder="840" v-model="tmpVideoSetting.chlTimeXPos" disabled></el-input>
                                    <el-input size="small" placeholder="490" v-model="tmpVideoSetting.chlTimeYPos" disabled></el-input>
                                </li>
                            </ul>
                            <div class="xzgd">
                                <span></span>
                                <span>字符增加</span>
                            </div>
                            <ul class="zf_dj">
                                <li v-for="content,index in tmpVideoSetting.charContent" :key="index">
                                    <span>
                                        <el-checkbox v-model="tmpVideoSetting.charContent[index].nShowOSD" disabled></el-checkbox> 字符{{index+1}}
                                    </span>
                                    <el-input size="small" v-model="tmpVideoSetting.charContent[index].szOsdCode" disabled></el-input>
                                    <el-checkbox v-model="useGJM[index]" disabled>国际码</el-checkbox>
                                    <el-checkbox v-model="useCPH[index]" disabled>车牌号</el-checkbox>
                                </li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <div v-show="showJM=='3'">
            <div class="right_title">
                <span></span>
                <span>已选车辆 ({{checkBusNumber.length}})</span>
            </div>
            <el-divider></el-divider>
            <div class="right_content_zwsj">
                <div>
                <img src="../../static/img/ycpzZanwushuju.png" alt="">
                <span>
                    暂无数据
                </span>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            xs_time: [
                { value: '选项1', label: '12小时制'},
                { value: '选项2', label: '24小时制'},
            ],
            xs_date: [
                { value: '0', label: 'XXXX-XX-XX 年月日'},
                { value: '1', label: 'XX-XX-XXXX 月日年'},
                { value: '2', label: 'XX-XX-XXXX 日月年'},
                { value: '3', label: 'XXXX年XX月XX日'},
                { value: '4', label: 'XX月XX日XXXX年'},
                { value: '5', label: 'XX日XX月XXXX年'}
            ],
            osdAtr: [
                { value: '1', label: '透明,闪烁'},
                { value: '2', label: '透明,不闪烁'},
                { value: '3', label: '不透明,闪烁'},
                { value: '4', label: '不透明,不闪烁'},
            ],
            right:false,
            rightjy:true,
            isopen_pl: false,
            xmVal: '',
            curProject: '',
            proList: [{
                proName: '广州公交车数据采集服务项目',
                proId: '',
            }],
            labelProject: '',
            labelBusNumber: '',
            labelHostName: '',
            labelDeviceId: '',
            deviceSettings: {
                videoSetting: [{
                    "camName": "null",
                    "chlId": 140,
                    "deviceId": "",
                    "chlNumber": 1,
                    "chlOsdAttrib": "4",
                    "chlName": "Camera 01",
                    "chlIsShowOsd": 1,
                    "chlNameXPos": 512,
                    "chlNameYPos": 512,
                    "chlIsShowDate": 1,
                    "chlIsShowWeek": 1,
                    "chlOsdType": "3",
                    "chlIsShowTime": 1,
                    "chlHourOsdType": "0",
                    "chlTimeXPos": 0,
                    "chlTimeYPos": 32,
                    "charContent": "[{\"nCharCnt\":10,\"nShowOSD\":1,\"nUpLeftX\":0,\"nUpLeftY\":1,\"szOsdCode\":\"test0110-1\"},{\"nCharCnt\":0,\"nShowOSD\":0,\"nUpLeftX\":0,\"nUpLeftY\":0,\"szOsdCode\":\"\"},{\"nCharCnt\":0,\"nShowOSD\":0,\"nUpLeftX\":0,\"nUpLeftY\":0,\"szOsdCode\":\"\"},{\"nCharCnt\":0,\"nShowOSD\":0,\"nUpLeftX\":0,\"nUpLeftY\":0,\"szOsdCode\":\"\"},{\"nCharCnt\":0,\"nShowOSD\":0,\"nUpLeftX\":0,\"nUpLeftY\":0,\"szOsdCode\":\"\"},{\"nCharCnt\":0,\"nShowOSD\":0,\"nUpLeftX\":0,\"nUpLeftY\":0,\"szOsdCode\":\"\"},{\"nCharCnt\":0,\"nShowOSD\":0,\"nUpLeftX\":0,\"nUpLeftY\":0,\"szOsdCode\":\"\"},{\"nCharCnt\":0,\"nShowOSD\":0,\"nUpLeftX\":0,\"nUpLeftY\":0,\"szOsdCode\":\"\"}]"
                }],
                hostInfo: {
                    "hostName": "",
                    "deviceId": ""
                },
                gpsSetting: {
                    "gpsInterval": 20
                },
                tmpSetting: {
                    "isAlarmed": "1",
                    "tmpAlarmThreshold": 22.0
                }
            },
            multipleDeviceSetting: {
                hostInfo: {
                    "hostName": "",
                    "deviceId": ""
                },
                gpsSetting: {
                    "gpsInterval": 10
                },
                tmpSetting: {
                    "isAlarmed": "1",
                    "tmpAlarmThreshold": 50
                }
            },
            multipleVideoSetting: [{
                "camName": "通道2",
                "chlId": 0,
                "deviceId": "",
                "chlNumber": 0,
                "chlOsdAttrib": "",
                "chlName": "",
                "chlIsShowOsd": 0,
                "chlNameXPos": 0,
                "chlNameYPos": 0,
                "chlIsShowDate": 0,
                "chlIsShowWeek": 0,
                "chlOsdType": "0",
                "chlIsShowTime": 0,
                "chlHourOsdType": "0",
                "chlTimeXPos": 0,
                "chlTimeYPos": 0,
                "charContent": JSON.parse("[{\"nCharCnt\":0,\"nShowOSD\":0,\"nUpLeftX\":0,\"nUpLeftY\":0,\"szOsdCode\":\"\"},{\"nCharCnt\":0,\"nShowOSD\":0,\"nUpLeftX\":0,\"nUpLeftY\":0,\"szOsdCode\":\"\"},{\"nCharCnt\":0,\"nShowOSD\":0,\"nUpLeftX\":0,\"nUpLeftY\":0,\"szOsdCode\":\"\"},{\"nCharCnt\":0,\"nShowOSD\":0,\"nUpLeftX\":0,\"nUpLeftY\":0,\"szOsdCode\":\"\"},{\"nCharCnt\":0,\"nShowOSD\":0,\"nUpLeftX\":0,\"nUpLeftY\":0,\"szOsdCode\":\"\"},{\"nCharCnt\":0,\"nShowOSD\":0,\"nUpLeftX\":0,\"nUpLeftY\":0,\"szOsdCode\":\"\"},{\"nCharCnt\":0,\"nShowOSD\":0,\"nUpLeftX\":0,\"nUpLeftY\":0,\"szOsdCode\":\"\"},{\"nCharCnt\":0,\"nShowOSD\":0,\"nUpLeftX\":0,\"nUpLeftY\":0,\"szOsdCode\":\"\"}]")
            }],
            tmpVideoSetting: {
                "camName": "null",
                "chlId": 0,
                "deviceId": "",
                "chlNumber": 0,
                "chlOsdAttrib": "",
                "chlName": "",
                "chlIsShowOsd": 0,
                "chlNameXPos": 0,
                "chlNameYPos": 0,
                "chlIsShowDate": 0,
                "chlIsShowWeek": 0,
                "chlOsdType": "0",
                "chlIsShowTime": 1,
                "chlHourOsdType": "0",
                "chlTimeXPos": 0,
                "chlTimeYPos": 0,
                "charContent": [{
                    "nCharCnt": "",
                    "nShowOSD": "",
                    "nUpLeftX": "",
                    "nUpLeftY": "",
                    "szOsdCode": ""
                }],
            },
            chlList: [],
            chlIndex: 0,
            useChlName: false,
            jy:true,
            jyzf:'',
            useGJM: [
                false, false, false, false, false, false, false, false
            ],
            useJYGJM: false,
            useCPH: [
                false, false, false, false, false, false, false, false
            ],
            useJYCPH: false,
            useJYCPHD: true,
            chlSelectedList: [],
            cphVal: '',
            checkAll: false,
            checkBusNumber: [],
            busNumberList: [],
            isIndeterminate: true,
            tableData: [{
                xm_name: '广州公交车数据采集服务',
                cp_num: '粤A123456',
                zj_name: '粤A123456',
                zj_id: '123456765432'
            }, ],
            isAllowed: false,
            isVideoEdit: false,
            editHostName: "",
            activeNames: '',
            radio: '',
            bjVal: false,
            wdfzVal: '37.8',
            zjnameVal: '粤A123456',
            tb_cph: false,
            zjidVal: '123456765432',
            dialogVisible: false,
            td_name: true,
            chosDate: '',
            chosTime: '',
            zf_1: false,
            zf_2: false,
            zf_3: false,
            zf_4: false,
            zf_5: false,
            zf_6: false,
            zf_7: false,
            zf_8: false,
            gjm_1: false,
            gjm_2: false,
            gjm_3: false,
            gjm_4: false,
            gjm_5: false,
            gjm_6: false,
            gjm_7: false,
            gjm_8: false,
            cph_1: false,
            cph_2: false,
            cph_3: false,
            cph_4: false,
            cph_5: false,
            cph_6: false,
            cph_7: false,
            cph_8: false,
            gps_inp: "",
            showJM: "1",
        }
    },
    created() {
        this.getProList();
    },
    methods: {
        getProList() {
            let _this = this;
            _this.$axios.get('/setting/get/proList')
                .then((res) => {
                    let data = res.data.data;
                    _this.proList = [];
                    data.forEach(element => {
                        _this.proList.push({
                            proName: element.proName,
                            proId: element.pid
                        })
                    });
                    if (typeof data[0] != 'undefined') {
                        _this.curProject = data[0].pid;
                        _this.proChange(_this.curProject);
                    }

                })
                .catch((e) => {
                    console.log(e);
                })
        },
        proChange(proId) {
            let _this = this;
            _this.$axios.get("/setting/get/VehicleList?proId=" + proId)
                .then((res) => {
                    let data = res.data.data;
                    _this.busNumberList = [];
                    data.forEach(element => {
                        _this.busNumberList.push(element.busNumber);
                    });
                    _this.checkBusNumber = [];
                    _this.labelProject = "";
                    this.labelBusNumber = "";
                    this.labelHostName = "";
                    this.labelDeviceId = "";
                    if (typeof data[0] != 'undefined' && data[0] != null) {
                        _this.labelProject = data[0].proName;
                        _this.checkBusNumber.push(data[0].busNumber);
                        _this.handleCheckedCitiesChange([_this.checkBusNumber[0]])
                    } else {
                        _this.showJM = 3
                    }

                })
                .catch((e) => {
                    console.log(e);
                })
        },
        //根据proId、busNumber（模糊）查询对应的车辆信息
        handlerDeptList(){
            let _this = this;
            let fd = new FormData();
            console.log(_this.xmVal)
            fd.append('proId',_this.curProject)
            fd.append('busNumber', _this.xmVal)
            
            _this.$axios.post('/setting/get/busList',{
                proId: _this.curProject,
                busNumber: _this.xmVal
            })
                .then((res) => {
                    let data = res.data.data;
                    _this.busNumberList = [];
                    data.forEach(element => {
                        _this.busNumberList.push(element.busNumber);
                    });
                    _this.checkBusNumber = [];
                    _this.labelProject = "";
                    this.labelBusNumber = "";
                    this.labelHostName = "";
                    this.labelDeviceId = "";
                    if (typeof data[0] != 'undefined' && data[0] != null) {
                        _this.labelProject = data[0].proName;
                        _this.checkBusNumber.push(data[0].busNumber);
                        _this.handleCheckedCitiesChange([_this.checkBusNumber[0]])
                    } else {
                        _this.showJM = 3
                    }

                })
                .catch((e) => {
                    console.log(e);
                })
        },
        handleCheckedCitiesChange(value) {
            let _this = this;
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.busNumberList.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.busNumberList.length;
            if (this.checkBusNumber.length < 1) {
                this.showJM = 3;
            } else  if (this.checkBusNumber.length != 1) {
                _this.initMultipleDeviceSetting();
                this.showJM = 2;
            } else {
                _this.$axios.get("/setting/get/vehicleSetting?busNumber=" + _this.checkBusNumber)
                    .then((res) => {
                        let data = res.data.data;
                        _this.deviceSettings = {};
                        _this.deviceSettings = data;
                        if (_this.deviceSettings != null) {
                            for (let i = 0; i < _this.deviceSettings.videoSetting.length; i++) {
                                _this.deviceSettings.videoSetting[i].chlIsShowOsd =
                                    _this.deviceSettings.videoSetting[i].chlIsShowOsd == 1 ? true : false;
                                _this.deviceSettings.videoSetting[i].chlIsShowDate =
                                    _this.deviceSettings.videoSetting[i].chlIsShowDate == 1 ? true : false;
                                _this.deviceSettings.videoSetting[i].chlIsShowWeek =
                                    _this.deviceSettings.videoSetting[i].chlIsShowWeek == 1 ? true : false;
                                _this.deviceSettings.videoSetting[i]. chlIsShowTime =
                                    _this.deviceSettings.videoSetting[i].chlIsShowTime == 1 ? true : false;
                                _this.deviceSettings.videoSetting[i].charContent = JSON.parse(_this.deviceSettings.videoSetting[i].charContent);
                                for (let j = 0; j < _this.deviceSettings.videoSetting[i].charContent.length; j++) {
                                    _this.deviceSettings.videoSetting[i].charContent[j].nShowOSD = _this.deviceSettings.videoSetting[i].charContent[j].nShowOSD == 1 ? true : false
                                }
                            }
                             _this.labelHostName = data.hostInfo.hostName;
                             _this.labelDeviceId = data.hostInfo.deviceId;
                        }
                    })
                    .catch((e) => {
                        console.log(e);
                    })
                this.labelBusNumber = value[0];
                this.showJM = 1;
            }
        },

        gjmUsed(index) {
            if (this.useCPH[index]) {
                this.useCPH[index] = false
            }
            // this.useGJM[index] = !this.useGJM[index];
            if (this.useGJM[index]) {
                this.tmpVideoSetting.charContent[index].szOsdCode = "国际码"
            } else {
                this.tmpVideoSetting.charContent[index].szOsdCode = ""
            }
        },
        cphUsed(index) {
            if (this.useGJM[index]) {
                this.useGJM[index] = false
            }
            // this.useCPH[index] = !this.useCPH[index];
            if (this.useCPH[index]) {
                this.tmpVideoSetting.charContent[index].szOsdCode = "车牌号"
            } else {
                this.tmpVideoSetting.charContent[index].szOsdCode = ""
            }
        },
        chlNameUsed(val) {
            let _this = this;
            if (val) {
                this.tmpVideoSetting.chlName = _this.chlList[_this.chlIndex].chlName
            } else {
                this.tmpVideoSetting.chlName = ""
            }
        },
        tbcph(val) {
            let _this = this;
            _this.editHostName = _this.checkBusNumber[0];

        },
        chlIsSelected(chlId) {
            for (let i = 0; i < this.chlSelectedList.length; i++) {
                if (this.chlSelectedList[i] == chlId) return i;
            }
            return false;
        },
        changeChlIndex(e, chlId) {
            let _this = this;
            if (e.target.className.indexOf("chlselect") == -1) {
                e.target.className = "chlselect"; //选中div样式
            } else {
                e.target.className = "chlnotSelect"; //未选中div样式
            }
            if (this.chlIsSelected(chlId) === false) {
                this.chlSelectedList.push(chlId);
            } else {
                this.chlSelectedList.splice(this.chlIsSelected(chlId), 1);
            }
            if (this.chlSelectedList.length != 1) {
                this.initTmpVideoSetting();
            } else if (this.chlSelectedList.length == 1) {
                this.initTmpVideoSetting();
                
                for (let i = 0; i < this.deviceSettings.videoSetting.length; i++) {
                    // this.tmpVideoSetting[i] = [];
                    _this.deviceSettings.videoSetting[i].chlIsShowOsd =
                        _this.deviceSettings.videoSetting[i].chlIsShowOsd == 1 ? true : false;
                    _this.deviceSettings.videoSetting[i].chlIsShowDate =
                        _this.deviceSettings.videoSetting[i].chlIsShowDate == 1 ? true : false;
                    _this.deviceSettings.videoSetting[i].chlIsShowWeek =
                        _this.deviceSettings.videoSetting[i].chlIsShowWeek == 1 ? true : false;
                    _this.deviceSettings.videoSetting[i]. chlIsShowTime =
                        _this.deviceSettings.videoSetting[i].chlIsShowTime == 1 ? true : false;
                    if( typeof _this.deviceSettings.videoSetting[i].charContent == 'string'){
                        _this.deviceSettings.videoSetting[i].charContent = JSON.parse(_this.deviceSettings.videoSetting[i].charContent);
                    }
                   
                    for (let j = 0; j < _this.deviceSettings.videoSetting[i].charContent.length; j++) {
                        _this.deviceSettings.videoSetting[i].charContent[j].nShowOSD = _this.deviceSettings.videoSetting[i].charContent[j].nShowOSD == 1 ? true : false
                    }
                    if (this.deviceSettings.videoSetting[i].chlId == this.chlSelectedList[0]) {
                        let tmpCharContent = [];
                        for (let j = 0; j < this.deviceSettings.videoSetting[i].charContent.length; j++) {
                            tmpCharContent.push({
                                "nCharCnt": this.deviceSettings.videoSetting[i].charContent[j].nCharCnt,
                                "nShowOSD": this.deviceSettings.videoSetting[i].charContent[j].nShowOSD,
                                "nUpLeftX": this.deviceSettings.videoSetting[i].charContent[j].nUpLeftX,
                                "nUpLeftY": this.deviceSettings.videoSetting[i].charContent[j].nUpLeftY,
                                "szOsdCode": this.deviceSettings.videoSetting[i].charContent[j].szOsdCode
                            })
                        }
                        this.tmpVideoSetting = {
                            ...this.deviceSettings.videoSetting[i],
                            charContent: tmpCharContent
                        }
                        this.chlIndex = i;
                    }
                }

            }
        },
        initTmpVideoSetting() {
            this.tmpVideoSetting = {};
            let tmpCharContent = [];
            for (let j = 0; j < 8; j++) {
                tmpCharContent.push({
                    "nCharCnt": "",
                    "nShowOSD": "",
                    "nUpLeftX": "",
                    "nUpLeftY": "",
                    "szOsdCode": ""
                })
            }
            this.tmpVideoSetting = {
                "camName": "",
                "chlId": "",
                "deviceId": "",
                "chlNumber": "",
                "chlOsdAttrib": "",
                "chlName": "",
                "chlIsShowOsd": "",
                "chlNameXPos": "",
                "chlNameYPos": "",
                "chlIsShowDate": "",
                "chlIsShowWeek": "",
                "chlOsdType": "",
                "chlIsShowTime": "",
                "chlHourOsdType": "",
                "chlTimeXPos": "",
                "chlTimeYPos": "",
                "charContent": tmpCharContent
            }

        },
        initMultipleDeviceSetting(){
            let _this = this;
            let hostInfo = {
                "hostName": "",
                "deviceId": ""
            };
            let gpsSetting= {
                "gpsInterval": 10
            };
            let tmpSetting= {
                "isAlarmed": "0",
                "tmpAlarmThreshold": ''
            };
            _this.multipleDeviceSetting = {hostInfo:hostInfo,gpsSetting:gpsSetting,tmpSetting:tmpSetting};
        },
        show_right() {
            let _this = this;
            _this.right = !_this.right;
            _this.rightjy = !_this.rightjy;
        },
        hide_pl() {
            let _this = this;
            _this.isopen_pl = !_this.isopen_pl;
        },
        cancelSetting() {
            let _this = this;
            _this.chlList = [];
            _this.chlSelectedList = [];
            _this.initTmpVideoSetting;
            _this.isVideoEdit = false;
            _this.isopen_pl = !_this.isopen_pl;
        },
        setVideoSettting() {
            let _this = this;
            _this.chlList = [];
            _this.chlSelectedList = [];
            if (_this.showJM == "1") {
                this.initTmpVideoSetting();
                _this.chlList = [];

                for (let i = 0; i < _this.deviceSettings.videoSetting.length; i++) {
                    _this.chlList.push({
                        chlId: _this.deviceSettings.videoSetting[i].chlId,
                        chlName: _this.deviceSettings.videoSetting[i].chlName,
                        camName: _this.deviceSettings.videoSetting[i].camName
                    })
                }
            } else {
                this.initTmpVideoSetting();
                for (let i = 0; i < 6; i++) {
                    _this.chlList.push({
                        camName: `通道${i+1}`,
                        chlId: i + 1,
                        chlNumber: i + 1,
                    })
                }
            }

            _this.isopen_pl = !_this.isopen_pl;
        },
        saveVideoSetting() {
            let _this = this;
            if (_this.showJM == '1') {
                if (_this.chlSelectedList.length > 0) {
                    for (let i = 0; i < _this.deviceSettings.videoSetting.length; i++) {
                        for (let j = 0; j < _this.chlSelectedList.length; j++) {
                            if (_this.deviceSettings.videoSetting[i].chlId == _this.chlSelectedList[j]) {
                                _this.deviceSettings.videoSetting[i] = {
                                    chlId: _this.deviceSettings.videoSetting[i].chlId,
                                    camName: _this.deviceSettings.videoSetting[i].camName,
                                    ..._this.tmpVideoSetting
                                }
                                _this.deviceSettings.videoSetting[i].chlIsShowOsd =
                                    _this.tmpVideoSetting.chlIsShowOsd == true || 1 ? 1 : 0;
                                _this.deviceSettings.videoSetting[i].chlIsShowDate =
                                    _this.tmpVideoSetting.chlIsShowDate == true || 1 ? 1 : 0;
                                _this.deviceSettings.videoSetting[i].chlIsShowWeek =
                                    _this.tmpVideoSetting.chlIsShowWeek == true || 1 ? 1 : 0;
                                _this.deviceSettings.videoSetting[i].chlIsShowTime =
                                    _this.tmpVideoSetting.chlIsShowTime == true || 1 ? 1 : 0;
                                for (let k = 0; k < _this.tmpVideoSetting.charContent.length; k++) {
                                    _this.tmpVideoSetting.charContent[k].nShowOSD = _this.tmpVideoSetting.charContent[k].nShowOSD == true ? 1 : 0
                                }
                                _this.deviceSettings.videoSetting[i].charContent = JSON.stringify(_this.tmpVideoSetting.charContent)
                            } else {
                                _this.deviceSettings.videoSetting[i].chlIsShowOsd =
                                    _this.deviceSettings.videoSetting[i].chlIsShowOsd == true || 1 ? 1 : 0;
                                _this.deviceSettings.videoSetting[i].chlIsShowDate =
                                    _this.deviceSettings.videoSetting[i].chlIsShowDate == true || 1 ? 1 : 0;
                                _this.deviceSettings.videoSetting[i].chlIsShowWeek =
                                    _this.deviceSettings.videoSetting[i].chlIsShowWeek == true || 1 ? 1 : 0;
                                _this.deviceSettings.videoSetting[i].chlIsShowTime =
                                    _this.deviceSettings.videoSetting[i].chlIsShowTime == true || 1 ? 1 : 0;
                                if (typeof _this.deviceSettings.videoSetting[i].charContent == 'object') {
                                    for (let k = 0; k < _this.deviceSettings.videoSetting[i].charContent.length; k++) {
                                        _this.deviceSettings.videoSetting[i].charContent[k].nShowOSD = _this.deviceSettings.videoSetting[i].charContent[k].nShowOSD == true || 1 ? 1 : 0;

                                    }
                                    _this.deviceSettings.videoSetting[i].charContent = JSON.stringify(_this.deviceSettings.videoSetting[i].charContent);
                                }

                            }
                        }
                    }
                } else {
                    for (let i = 0; i < _this.deviceSettings.videoSetting.length; i++) {
                        _this.deviceSettings.videoSetting[i].chlIsShowOsd =
                            _this.deviceSettings.videoSetting[i].chlIsShowOsd == true || 1? 1 : 0;
                        _this.deviceSettings.videoSetting[i].chlIsShowDate =
                            _this.deviceSettings.videoSetting[i].chlIsShowDate == true|| 1 ? 1 : 0;
                        _this.deviceSettings.videoSetting[i].chlIsShowWeek =
                            _this.deviceSettings.videoSetting[i].chlIsShowWeek == true || 1? 1 : 0;
                        _this.deviceSettings.videoSetting[i].chlIsShowTime =
                            _this.deviceSettings.videoSetting[i].chlIsShowTime == true || 1 ? 1 : 0;
                        for (let j = 0; j < _this.deviceSettings.videoSetting[i].charContent.length; j++) {
                            _this.deviceSettings.videoSetting[i].charContent[j].nShowOSD = _this.deviceSettings.videoSetting[i].charContent[j].nShowOSD == true ? 1 : 0;
                        }
                        _this.deviceSettings.videoSetting[i].charContent = JSON.stringify(_this.deviceSettings.videoSetting[i].charContent);
                    }
                }
            } else {
                _this.multipleVideoSetting = [];
                for (let i = 0; i < _this.chlSelectedList; i++) {

                    _this.multipleVideoSetting.push({
                        ..._this.tmpVideoSetting,
                        chlNumber: _this.chlSelectedList[i]
                    });
                    _this.multipleVideoSetting[i].chlIsShowOsd =
                        _this.tmpVideoSetting.chlIsShowOsd == true ? 1 : 0;
                    _this.multipleVideoSetting[i].chlIsShowDate =
                        _this.tmpVideoSetting.chlIsShowDate == true ? 1 : 0;
                    _this.multipleVideoSetting[i].chlIsShowWeek =
                        _this.tmpVideoSetting.chlIsShowWeek == true ? 1 : 0;
                    _this.multipleVideoSetting[i].chlIsShowTime =
                        _this.tmpVideoSetting.chlIsShowTime == true || 1 ? 1 : 0;
                    for (let k = 0; k < _this.tmpVideoSetting.charContent.length; k++) {
                        _this.tmpVideoSetting.charContent[k].nShowOSD = _this.tmpVideoSetting.charContent[k].nShowOSD == true ? 1 : 0
                    }
                    _this.multipleVideoSetting[i].charContent = JSON.stringify(_this.tmpVideoSetting.charContent)
                }
            }
            _this.isVideoEdit = true;
            _this.chlList = [];
            _this.chlSelectedList = [];
            _this.initTmpVideoSetting();
            _this.isopen_pl = !_this.isopen_pl;
        },
        bcSJ() {
            let _this = this;
            this.$confirm('确定保存并提交修改？')
                .then(e => {
                    if (_this.showJM == 1) {
                        let deviceSettings = [{
                            ..._this.deviceSettings,
                            hostInfo: {
                                hostName: _this.isAllowed ? this.editHostName : _this.deviceSettings.hostInfo.hostName,
                                deviceId: _this.deviceSettings.hostInfo.deviceId
                            },
                            videoSetting: _this.isVideoEdit ? _this.deviceSettings.videoSetting : []
                        }, ]
                        _this.$axios.post("/setting/update/vehicleSetting", deviceSettings)
                            .then((res) => {
                                _this.$message({
                                    type: 'success',
                                    message: '修改成功'
                                });
                                _this.right = !_this.right;
                                _this.rightjy = !_this.rightjy;     
                            })
                            .catch((res) => {})
                    } else {
                        let busInfos = [];

                        for (let i = 0; i < _this.checkBusNumber.length; i++) {
                            busInfos.push({
                                busNumber: _this.checkBusNumber[i]
                            })
                        }
                        _this.$axios.post("/setting/update/multiVehicleSetting", {
                                hostInfo: _this.multipleDeviceSetting.hostInfo,
                                gpsSetting: _this.multipleDeviceSetting.gpsSetting,
                                tmpSetting: _this.multipleDeviceSetting.tmpSetting,
                                busInfos: busInfos,
                                videoSetting: _this.isVideoEdit ? _this.multipleVideoSetting : []
                            })
                            .then((res) => {
                                _this.$message({
                                    type: 'success',
                                    message: '修改成功'
                                });
                            })
                            .catch((res) => {

                            })
                    }
                })
                .catch(e => {});

            // }).catch(action => {
            //     this.$message({
            //         type: 'error',
            //         message: '保存失败'
            //     })
            // });
        },
        handleCheckAllChange(val) { 
            let _this = this;
            this.checkBusNumber = val ? this.busNumberList : [];
            this.isIndeterminate = false;
            if( !val ){
                _this.initMultipleDeviceSetting();
                this.showJM = 3
            } else if( this.checkBusNumber.length == 1 ){
                _this.handleCheckedCitiesChange(_this.checkBusNumber[0]);
            } else {
                _this.initMultipleDeviceSetting();
                this.showJM = 2
            }
        },
        

        handleChange(val) {},
        handleClose(done) {
            this.$confirm('暂未保存，确认关闭？').then(_ => {
                done();
            }).catch(_ => {});
        }
    },
}
</script>

<style scoped>
.right_content_zwsj>div>span{
    font-size: 18px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8784313725490196);
}
.right_content_zwsj>div>img{
    width: 192px;
    height: 192px;
    display: block;
}
.right_content_zwsj>div{
    width: 192px;
    text-align: center;
}
.right_content_zwsj{
    width: 100%;
    height: calc(100vh - 184px);
    display: flex;
    justify-content: center;
    align-items: center;
}
.yxcl_nr>span:nth-child(1),
.yxcl_nr>span:nth-child(3),
.yxcl_nr>span:nth-child(5),
.yxcl_nr>span:nth-child(7) {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: #707070;
    opacity: 1;
    line-height: 84px;
}

.yxcl_nr>span:nth-child(1) {
    padding-left: 16px;
}

.yxcl_nr>span:nth-child(2),
.yxcl_nr>span:nth-child(4),
.yxcl_nr>span:nth-child(6),
.yxcl_nr>span:nth-child(8) {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: #000000;
    opacity: 1;
    margin-right: 32px;
}

.yxcl_nr {
    background: #FFFFFF;
    border-radius: 8px;
    height: 100%;
}

.yxcl_box {
    background: #F5F5F5;
    border-radius: 8px;
    height: 84px;
    padding: 8px;
}

.spcs_box {
    background: #FFFFFF;
    border-radius: 8px;
}

/deep/ .el-collapse-item__content {
    background: #e5e5e5;
    border-radius: 8px;
    padding: 8px;
}

/deep/ .el-collapse-item__header {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 36px;
    color: #000E1D;
    opacity: 1;
}

.el-collapse-item__header .el-icon-wjj:before,
.el-icon-bus:before {
    content: "替";
    font-size: 14px;
    visibility: hidden;
}

.el-icon-bus {
    background: url(../../static/img/bus.png) center no-repeat;
    background-size: cover;
    margin-right: 4px;
}

.el-icon-wjj {
    background: url(../../static/img/wjj.png) center no-repeat;
    background-size: cover;
    margin-right: 4px;
}

.x_an>>>.el-button {
    width: 100px;
}

.x_an>>>.el-button:nth-child(1) {
    margin-right: 16px;
}

.x_an {
    display: flex;
    margin-top: 40px;
    margin-bottom: 20px;
    margin-left: 35%;
}

.dialog-footer {
    margin-left: 35%;
    margin-top: 40px;
}

.xzgd>span:nth-child(1) {
    border-left: 4px solid #3C74E3;
    display: inline-block;
    height: 14px;
}

.right_title>span:nth-child(1) {
    border-left: 4px solid #3C74E3;
    display: inline-block;
    height: 14px;
}

.xzgd>span {
    padding-left: 4px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 36px;
    color: #000E1D;
}

.xzgd {
    width: 100%;
    height: 42px;
    border-bottom: 1px solid #F0F0F0;
}

/* 滚动条样式 */
.spnr::-webkit-scrollbar,.spnr_jy::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.spnr::-webkit-scrollbar-thumb,.spnr_jy::-webkit-scrollbar-thumb{
    /*滚动条里面小方块*/
    border-radius: 10px;
    background: rgba(204, 204, 204, 0.39);
}

.spnr::-webkit-scrollbar-track, .spnr_jy::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #f5f5f5;
}

.spnr {
    overflow-y: scroll;
    width: 692px;
    height: 700px;
}
.spnr_jy{
    overflow-y: scroll;
    width: 692px;
    height: 478px;
}

.spsz {
    position: fixed;
    top: 70px;
    left: 800px;
    width: 692px;
    height: 830px;
    border: #f5f5f5 solid 1px;
    border-radius: 10px;
    box-sizing: border-box;
    background-color: #ffffff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
    z-index: 999;
}
.spsz_jy{
    position: fixed;
    top: 220px;
    left: 700px;
    width: 692px;
    height: 542px;
    border: #f5f5f5 solid 1px;
    border-radius: 10px;
    box-sizing: border-box;
    background-color: #ffffff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.spsz>>>.cancel,.spsz_jy>>>.cancel {
    position: absolute;
    width: 80px;
    height: 36px;
    background: white;
    border-radius: 4px;
    border-width: 1px;
    border-color: #3c74e3;
    /* border: none; */
    color: #3C74E3;
    font-size: 14px;
    right: 116px;
    bottom: 20px;
    display: none;
}

.spsz>>>.confirm,.spsz_jy>>>.confirm {
    position: absolute;
    width: 80px;
    height: 36px;
    background: #3c74e3;
    border-radius: 4px;
    border: none;
    color: #ffffff;
    font-size: 14px;
    right: 20px;
    bottom: 20px;
    display: none;
}

.spsz:hover,.spsz_jy:hover {
    display: block;
}

.spsz>div:nth-child(1),.spsz_jy>div:nth-child(1) {
    height: 48px;
    font-size: 16px;
    padding-left: 20px;
    font-family: "PingFang SC";
    font-weight: 600;
    color: rgba(0, 0, 0, 0.88);
    line-height: 48px;
    align-items: center;
    background-color: #f5f5f5;
}

.spsz>div:nth-child(1)>span:nth-child(2),.spsz_jy>div:nth-child(1)>span:nth-child(2) {
    position: absolute;
    background: url(/static/img/close.png) no-repeat;
    width: 16px;
    height: 16px;
    right: 20px;
    top: 18px;
    cursor: pointer;
}

.spsz>div>span:nth-child(2),.spsz_jy>div>span:nth-child(2) {
    background: url(/static/img/spsz.png) no-repeat;
    background-size: 32px 23.97px;
    background-position: 32px 32px;
}

.gps_inp {
    width: 80px !important;
}

.zf_dj>li>span {
    margin-right: 22px;
}

.tdmc_checkbox {
    margin-left: 10px;
}

.mcxs_zbz>>>.el-input {
    width: 100px !important;
}

.osd_sx>li>span {
    display: inline-block;
    text-align: right;
    width: 86px;
}

.el-collapse-item {
    padding-left: 8px;
}

.osd_sx,
.zf_dj {
    margin-left: 20%;
}

.right_sz>ul>li {
    margin-top: 8px;
}

.right_sz>>>.el-input {
    width: 180px;
    margin-left: 8px;
}

.osd_sx>li {
    font-size: 12px;
}

/* .sxt_xz>>>.el-button:nth-child(1) {
    margin-right: 6%;
} */

.sxt_xz {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 16px;
    margin-top: 16px;
    /* margin-left: 25%; */
}

.sxt_xz .chlnotSelect {
    width: 140px;
    height: 36px;
    background: #FFFFFF;
    border: 1px solid #3C74E3;
    border-radius: 4px;
    line-height: 36px;
    text-align: center;
    color: #3C74E3;
    cursor: pointer;
}

.sxt_xz .chlselect {
    width: 140px;
    height: 36px;
    background: #3C74E3;
    border: 1px solid #FFFFFF;
    border-radius: 4px;
    line-height: 36px;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
}

.right_sz {
    width: 91%;
    margin-left: 4%;
    margin-right: 4%;
}

.left_sp>div {
    width: 90%;
    height: 270px;
    border: 1px solid #e5e5e5;
    margin-top: 2%;
    margin-left: 4%;
}

.left_sp {
    width: 100%;
    height: 100%;
}

.cwbj>>>.el-input {
    width: 120px !important;
}

.cwbj>span:nth-of-type(2) {
    margin: 0 16px 0 60px;
}

.cwbj>span:nth-child(1) {
    margin-right: 16px;
}

.zhuji_id>>>.el-input,
.zhuji_name>>>.el-input {
    width: 220px;
}

.zhuji_id>>>.el-input {
    margin-left: 13px;
}

.zhuji_name>>>.el-checkbox {
    margin-left: 40px;
}

.right_title>>>.el-button {
    margin-left: 16px;
}

.right_title>span {
    font-weight: 600;
}

.zhuji_name,
.zhuji_id,
.cwbj {
    padding: 4px 16px;
    background: #FFFFFF;
}

.bc {
    border: 1px solid #3C74E3;
    color: #ffffff;
    background: #3C74E3;
}

.sp_sz {
    margin-left: 9px;
    margin-top: 8px;
    margin-bottom: 8px;
    border: 1px solid #3C74E3;
    color: #ffffff;
    background: #3C74E3;
}

.el-table {
    margin-bottom: 16px;
}

.el-divider--horizontal {
    margin: 8px 0 !important;
}

.right_title>.el-button {
    float: right;
    width: 100px;
    margin-bottom: 8px;
    height: 36px;
}

.right_title {
    width: 100%;
    height: 30px;
    line-height: 40px;
}

.slect_cp>>>.el-checkbox:nth-of-type(1) {
    line-height: 26px;
}

.slect_cp>>>.el-checkbox {
    display: block;
}

.slect_cp {
    width: 100%;
    height: calc(100% - 84px);
    line-height: 20px;
}

/* .left_cell>.el-button:nth-of-type(1){
    background: #2e70dd !important;
} */
.left_inp>>>.el-input {
    margin-bottom: 10px;
}

.left_inp {
    width: 90%;
    display: inline-block;
}

.left_cell {
    width: 15%;
    height: 100%;
    float: left;
    padding: 16px 0 0 16px;
    box-sizing: border-box;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
}

.right_cell {
    width: 85%;
    height: 100%;
    float: left;
    padding: 8px 16px;
    box-sizing: border-box;
}

.content {
    width: 100%;
    height: calc(100% - 52px);
    background: #fff;
    margin-top: 8px;
}
</style>
